<template>
<!-- templdate下面只能有一个根节点,也就是只能包含一个div -->
<div>
    <div class="box">
        <h3>this is a demo  ------  {{username}}</h3>
        <button @click="btnRepaire">repair this username</button>
    </div>
    <div>123</div>
</div>
    
</template>

<script>
    // 默认到处.这是固定写法
    export default{
        // 定义 data 数据源
        // .vue组件中的data不能指向对象
        // 组件中的data必须是一个函数
       data() {
        return {
            username: 'dongdong',
        }
       },
       methods: {
        btnRepaire(){
            // this表示当前组件的实例对象
            this.username = "dongdong-repaire"
        }
       },
        // 当前组件侦听器
       watch:{},
        // 当前组件计算属性
       computed:{},
        // 当前组件局部过滤器
       filters:{},
       
    }
</script>

<style lang="less">
    .box{
        background-color: brown;
        height: 300px;
        width: 300px;
        margin: 0 auto;
    }
    h3 {
        color: blue;
    }
</style>